<template>
  <div class="managementMember">
    <el-dialog
      title="管理成员"
      :visible.sync="memberDialogVisible"
      width="85%"
      @opened="getMemberList()"
      @close="close()"
      :center="true"
      :before-close="memberCancel"
    >
      <el-card class="box-card">
        <el-form>
          <el-form-item>
            <el-input
              placeholder="员工姓名"
              v-model="queryData.name"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.providerName"
              clearable
              placeholder="人员来源"
            >
              <el-option label="本公司" value="本公司"></el-option>
              <el-option label="供应商" value="供应商"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handlerSearch">查询</el-button>
            <el-button type="primary" @click="handlerAddMember"
              >添加成员</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table
          v-loading="loading"
          :data="memberList"
          border
          style="width: 100%"
        >
          <el-table-column prop="name" label="员工姓名" align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="110px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.sex == 0 ? "男" : "女" }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="stationName" label="岗位" align="center">
          </el-table-column>
          <el-table-column
            prop="inTime"
            width="110px"
            label="入项时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="beforeTime"
            width="110px"
            label="离项时间"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="rank" label="级别" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.rank == 0">初级</div>
              <div v-show="scope.row.rank == 1">中级</div>
              <div v-show="scope.row.rank == 2">高级</div>
            </template>
          </el-table-column>
          <el-table-column prop="yearsWorking" label="工作年限" align="center">
          </el-table-column>
          <el-table-column prop="providerName" label="人员来源" align="center">
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="shiftOut(scope.row)"
                >移出项目</el-button
              >
              <el-button
                type="text"
                size="small"
                v-show="scope.row.isLeader == 0"
                @click="handlerSetAsLeader(scope.row)"
                >设为负责人</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :page.sync="queryData.pageNum"
          :limit.sync="queryData.pageSize"
          @pagination="getMemberList"
        />
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="memberCancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
    <AddMember
      :addMemberDialogVisible="addMemberDialogVisible"
      @addMemberCancel="addMemberCancel"
      @addMember="addMember"
    />
  </div>
</template>
<script>
// 导入接口文件
import {
  selectMember,
  removed,
  setAsLeader,
  addMember,
} from "../../../../api/item";

import Pagination from "../../../../components/Pagination/index.vue";
import AddMember from "./components/addMember.vue";
export default {
  name: "ManagementMember",
  props: ["memberDialogVisible"],
  components: {
    AddMember,
    Pagination,
  },
  data() {
    return {
      loading: true,
      addMemberDialogVisible: false,
      estimate: 0,
      indexs: "",
      region: "",
      memberList: [],
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        name: "", //员工名称
        providerName: "", //人员来源
        id: 0,
      },
    };
  },
  methods: {
    // 获取成员数据
    getMemberList() {
      this.queryData.id = this.$store.state['item/mid']
      selectMember(this.queryData).then((res) => {
        if (res.status === 200) {
          this.loading = false;
          this.total = res.data.total; //总条数
          this.queryData.pageNum = res.data.current; //当前页
          this.queryData.pageSize = res.data.size; //每页显示条数
          this.memberList = res.data.records;
        }
      });
    },
    // 关闭弹窗时的回调
    close() {
      this.queryData = {
        pageNum: 1,
        pageSize: 8,
        name: "",
        providerName: "",
        id: 0,
      },
        this.getMemberList();
      this.memberList = [];
    },
    // 取消按钮
    memberCancel() {
      this.$emit("memberCancel", false);
    },
    // 确定按钮
    determine() {
      this.$emit("determine", false);
    },
    // 移出成员按钮
    shiftOut(rows) {
      this.$confirm("确认将该成员移出项目", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removed({ id: rows.id }).then((res) => {
            this.getMemberList();
          });
          this.$message({
            type: "success",
            message: "移除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已移除删除",
          });
        });
    },
    // 打开添加成员弹窗按钮
    handlerAddMember() {
      this.addMemberDialogVisible = true;
    },
    // 取消添加按钮
    addMemberCancel(valFalse) {
      this.addMemberDialogVisible = valFalse;
    },
    // 确认添加按钮
    addMember(valList, valFalse) {
      addMember(valList).then((res) => {
        this.getMemberList();
      });
      this.addMemberDialogVisible = valFalse;
    },
    // 查询按钮
    handlerSearch() {
      this.getMemberList();
    },
    // 将成员设为负责人
    handlerSetAsLeader(rows) {
      this.$confirm(
        "确认将该成员设为项目负责任人，项目负责人只能有一个",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let listId = { id: rows.id, projectId: rows.projectId };
          setAsLeader(listId).then((res) => {
            this.getMemberList();
          });
          this.$message({
            type: "success",
            message: "设置成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消设置",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 250px;
}
.el-form {
  display: flex;
  justify-content: space-evenly;
}
.el-card {
  margin: 20px;
}
</style>
